<template>
  <Header :title="'我的订单'" />
  <van-tabs v-model:active="active" sticky offset-top="46px" @click-tab="onClickTab">
    <van-tab v-for="index in arr" :title="index">
      <div v-for="(item, index) in orderList" :key="index" v-if="type !== 'remark'">
        <div v-if="orderList.length">
          <div class="order_state">
            <span>订单时间: {{ item.create_time }}</span
            ><span>{{ item.isPay ? "已支付" : "未支付" }}</span>
          </div>
          <div class="order_list">
            <ShopCard :list="item.data"></ShopCard>
          </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </div>
      <IsRemark v-else :list="orderList" />
    </van-tab>
  </van-tabs>
</template>
<script setup>
import ShopCard from "@/components/ShopCard.vue";
import IsRemark from "@/components/IsRemark.vue";
import Header from "@/components/SHeader.vue";
import { ref } from "vue";
import { orderGet, hasPayList, noPayList } from "@/api/cart";
import { close, toast } from "@/util/toast";
import { onBeforeRouteLeave } from "vue-router";
const arr = ["全部", "待付款", "待确认", "待发货", "已发货", "交易完成", "待评价"];
const orderList = ref([]);
const type = ref("order");
//获取全部订单
const getOrderList = async () => {
  orderList.value = [];
  toast("loading", "加载中...", 100000);
  const { data } = await orderGet();
  orderList.value = data.res;
  close();
};
// 获取已支付订单
const getHasPayList = async () => {
  orderList.value = [];
  toast("loading", "加载中...", 100000);
  const { data } = await hasPayList();
  if (type.value === "remark") {
    orderList.value = data.res.reduce((pre, cur) => {
      return pre.concat(cur.data);
    }, []);
  } else {
    orderList.value = data.res;
  }
  close();
};
// 获取未支付订单
const getNoPayList = async () => {
  orderList.value = [];
  toast("loading", "加载中...", 100000);
  const { data } = await noPayList();
  orderList.value = data.res;
  close();
};
getOrderList();
const typeObj = {
  全部: getOrderList,
  待付款: getNoPayList,
  已付款: getHasPayList,
  待评价: getHasPayList,
  待确认: () => {
    orderList.value = [];
  },
  待发货: () => {
    orderList.value = [];
  },
  已发货: () => {
    orderList.value = [];
  },
  交易完成: () => {
    orderList.value = [];
  },
};
const active = ref(0);
//标签切换
const onClickTab = ({ title }) => {
  console.log(11111, title);
  type.value = title === "待评价" ? "remark" : "order";
  typeObj[title]();
};
// 组件路由
onBeforeRouteLeave((to, from, next) => {
  if (to.name == "order") {
    next("/mine");
  } else {
    next();
  }
});
</script>
<style lang="scss" scoped>
.order_state {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
}
// .order_list {
//   height: calc(100% - 90px);
//   overflow-y: scroll;
//   overflow-x: hidden;
// }
</style>
